Reactの核心：調整アルゴリズムと仮想DOM差分検出への深掘り

`は次のように表現されるかもしれません：

{ type: 'div', props: { className: 'container', children: 'Hello World' } }

これらは単なるJavaScriptオブジェクトであるため、作成と操作は非常に高速です。ブラウザAPIとのやり取りは一切なく、リフローや再描画も発生しません。

仮想DOMはどのように機能するのか？

VDOMは、UI開発において宣言的なアプローチを可能にします。ブラウザにDOMをどのように段階的に変更するかを指示する（命令的）のではなく、特定の状態に対してUIがどうあるべきかを宣言する（宣言的）だけです。残りはReactが処理します。

プロセスは次のようになります：

1. 初回レンダリング：アプリケーションが最初にロードされると、ReactはUIの完全な仮想DOMツリーを作成し、それを使用して最初の実際のDOMを生成します。
2. 状態の更新：アプリケーションの状態が変化する（例：ユーザーがボタンをクリックする）と、Reactは新しい状態を反映した新しい仮想DOMツリーを作成します。
3. 差分検出：Reactはメモリ内に2つの仮想DOMツリー（状態変更前の古いものと新しいもの）を持つことになります。次に、「差分検出」アルゴリズムを実行してこれら2つのツリーを比較し、正確な違いを特定します。
4. バッチ処理と更新：Reactは、新しい仮想DOMに一致するように実際のDOMを更新するために必要な、最も効率的で最小限の操作セットを計算します。これらの操作はまとめてバッチ処理され、単一の最適化されたシーケンスで実際のDOMに適用されます。

更新をバッチ処理することにより、Reactは遅いDOMとの直接的なやり取りを最小限に抑え、パフォーマンスを大幅に向上させます。この効率性の核心は、「差分検出」ステップにあり、これは正式には調整アルゴリズムとして知られています。

Reactの心臓部：調整アルゴリズム

調整とは、Reactが最新のコンポーネントツリーに一致するようにDOMを更新するプロセスです。この比較を実行するアルゴリズムが、私たちが「差分検出アルゴリズム」と呼ぶものです。

理論的には、あるツリーを別のツリーに変換するための最小限の変換数を見つけることは非常に複雑な問題であり、アルゴリズムの複雑さはO(n³)のオーダーになります（nはツリー内のノード数）。これは実世界のアプリケーションには遅すぎます。この問題を解決するために、ReactチームはWebアプリケーションが通常どのように動作するかについていくつかの素晴らしい観察を行い、はるかに高速なヒューリスティックアルゴリズムを実装しました。これはO(n)時間で動作します。

ヒューリスティクス：差分検出を高速かつ予測可能にする

Reactの差分検出アルゴリズムは、2つの主要な仮定またはヒューリスティクスに基づいています：

ヒューリスティクス1：異なる要素タイプは異なるツリーを生成する

これは最初で最も単純なルールです。2つのVDOMノードを比較する際、Reactはまずそれらのタイプを見ます。ルート要素のタイプが異なる場合、Reactは開発者が一方を他方に変換しようとはしていないと仮定します。代わりに、より抜本的ですが予測可能なアプローチを取ります：

• 古いツリー全体を解体し、すべての古いコンポーネントをアンマウントし、その状態を破棄します。
• 新しい要素タイプに基づいて、完全に新しいツリーをゼロから構築します。

例えば、次の変更を考えてみましょう：

変更前： <div><Counter /></div>
変更後： <span><Counter /></span>

子コンポーネントの`Counter`は同じですが、Reactはルートが`div`から`span`に変わったことを見て取ります。Reactは古い`div`とその中の`Counter`インスタンスを完全にアンマウントし（その状態を失う）、新しい`span`と全く新しい`Counter`のインスタンスをマウントします。

重要なポイント：コンポーネントのサブツリーの状態を保持したり、そのサブツリーの完全な再レンダリングを避けたい場合は、ルート要素のタイプを変更しないようにしてください。

ヒューリスティクス2：開発者は`key`プロパティで安定した要素を示すことができる

これは、開発者が理解し正しく適用する上で、おそらく最も重要なヒューリスティクスです。Reactが子要素のリストを比較する際、デフォルトの動作は、両方の子リストを同時に反復処理し、違いがある場所でミューテーション（変更）を生成することです。

インデックスベースの差分検出の問題点

アイテムのリストがあり、キーを使わずにリストの先頭に新しいアイテムを追加する場合を想像してみましょう。

初期リスト：

• アイテムB
• アイテムC

更新後リスト（先頭に「アイテムA」を追加）：

• アイテムA
• アイテムB
• アイテムC

キーがない場合、Reactは単純なインデックスベースの比較を行います：

1. インデックス0の古いアイテム（'アイテムB'）とインデックス0の新しいアイテム（'アイテムA'）を比較します。これらは異なるため、最初のアイテムを変更します。
2. インデックス1の古いアイテム（'アイテムC'）とインデックス1の新しいアイテム（'アイテムB'）を比較します。これらは異なるため、2番目のアイテムを変更します。
3. インデックス2に新しいアイテム（'アイテムC'）があるのを見て、それを挿入します。

これは非常に非効率です。Reactは2つの不要な変更と1つの挿入を行いましたが、必要だったのは先頭への1回の挿入だけでした。これらのリストアイテムが独自のstateを持つ複雑なコンポーネントだった場合、stateがコンポーネント間で混同される可能性があり、深刻なパフォーマンス問題やバグにつながる可能性があります。

`key`プロパティの力

`key`プロパティが解決策を提供します。これは、要素のリストを作成する際に含める必要がある特別な文字列属性です。キーは、Reactに各要素の安定した識別子を与えます。

同じ例を、今度は安定的でユニークなキーを使って見てみましょう：

初期リスト：

• アイテムB
• アイテムC

更新後リスト：

• アイテムA
• アイテムB
• アイテムC

これで、Reactの差分検出プロセスはずっと賢くなります：

1. Reactは新しいリストの子を見て、キーが'b'と'c'の要素を見つけます。
2. キー'b'と'c'を持つ要素は古いリストに既に存在することを知っているので、単にそれらを移動させます。
3. キー'a'を持つ新しい要素が以前は存在しなかったことを見て、それを作成して挿入します。

これははるかに効率的です。Reactは、1回の挿入操作のみが必要であることを正しく識別します。キー'b'と'c'に関連付けられたコンポーネントは維持され、内部状態も保持されます。

キーに関する重要なルール：キーは、兄弟要素間で安定的で、予測可能で、ユニークでなければなりません。配列のインデックスをキーとして使用すること（`items.map((item, index) =>

...

)`）は、リストが並べ替えられたり、フィルタリングされたり、途中からアイテムが追加/削除されたりする可能性がある場合、アンチパターンです。なぜなら、キーがない場合と同じ問題を引き起こすからです。最良のキーは、データベースIDのようなデータから得られるユニークな識別子です。

進化：スタックからFiberアーキテクチャへ

上記で説明した調整アルゴリズムは、長年にわたりReactの基盤でした。しかし、それには一つの大きな制限がありました：それは同期的でブロッキングであるということです。この最初の実装は現在、スタックリコンサイラと呼ばれています。

旧方式：スタックリコンサイラ

スタックリコンサイラでは、状態の更新が再レンダリングをトリガーすると、Reactはコンポーネントツリー全体を再帰的に走査し、変更を計算し、それらをDOMに適用するという一連の処理を、中断することなく一気に行いました。小さな更新であれば問題ありませんでしたが、大きなコンポーネントツリーの場合、このプロセスにはかなりの時間（例：16ms以上）がかかり、ブラウザのメインスレッドをブロックする可能性がありました。これにより、UIが応答しなくなり、フレーム落ちやカクカクしたアニメーション、そして貧弱なユーザーエクスペリエンスを引き起こしていました。

React Fiberの導入（React 16+）

この問題を解決するために、Reactチームは数年にわたるプロジェクトに着手し、コアの調整アルゴリズムを完全に書き直しました。その結果、React 16でリリースされたのがReact Fiberです。

Fiberアーキテクチャは、並行処理（Reactが複数のタスクに同時に取り組み、優先度に基づいてそれらを切り替える能力）を可能にするためにゼロから設計されました。

「ファイバー」とは、作業単位を表すプレーンなJavaScriptオブジェクトです。コンポーネント、その入力（props）、およびその出力（children）に関する情報を保持します。中断できない再帰的な走査の代わりに、Reactは今やファイバーノードのリンクリストを一度に一つずつ処理します。

この新しいアーキテクチャは、いくつかの重要な機能を解放しました：

• インクリメンタルレンダリング：レンダリング作業を小さなチャンクに分割し、複数のフレームにわたって分散させることができます。
• 優先順位付け：異なるタイプの更新に異なる優先度レベルを割り当てることができます。例えば、ユーザーが入力フィールドに入力する操作は、バックグラウンドでデータをフェッチするよりも高い優先度を持ちます。
• 一時停止と中断可能性：優先度の低い更新の作業を一時停止して優先度の高いものを処理したり、不要になった作業を中断したり再利用したりすることができます。

Fiberの2つのフェーズ

Fiberの下では、レンダリングプロセスは2つの明確なフェーズに分かれています：

1. レンダー/調整フェーズ（非同期）：このフェーズでは、Reactはファイバーノードを処理して「作業中」のツリーを構築します。コンポーネントの`render`メソッドを呼び出し、差分検出アルゴリズムを実行してDOMにどのような変更が必要かを判断します。重要なのは、このフェーズが中断可能であることです。Reactは、より重要な何かを処理するためにこの作業を一時停止し、後で再開することができます。中断される可能性があるため、Reactはこのフェーズ中に実際のDOM変更を適用せず、一貫性のないUI状態を避けます。
2. コミットフェーズ（同期）：作業中のツリーが完成すると、Reactはコミットフェーズに入ります。計算された変更を取得し、実際のDOMに適用します。このフェーズは同期的で中断不可能です。これにより、ユーザーは常に一貫したUIを見ることができます。`componentDidMount`や`componentDidUpdate`のようなライフサイクルメソッド、および`useLayoutEffect`や`useEffect`フックは、このフェーズ中に実行されます。

Fiberアーキテクチャは、`Suspense`、並行レンダリング、`useTransition`、`useDeferredValue`など、Reactの現代的な機能の多くを支える基盤となっており、これらすべてが開発者がより応答性が高く滑らかなユーザーインターフェースを構築するのを助けています。

開発者のための実践的な最適化戦略

Reactの調整プロセスを理解することで、よりパフォーマンスの高いコードを書く力が得られます。以下に、実用的な戦略をいくつか紹介します：

1. リストには常に安定的でユニークなキーを使用する

これはいくら強調しても足りません。リストにとって最も重要な最適化です。データからの一意のID（例：`product.id`）を使用してください。リストが完全に静的で決して変更されない場合を除き、配列のインデックスを使用するのは避けてください。

2. 不要な再レンダリングを避ける

コンポーネントは、そのstateが変更されたり、親が再レンダリングされたりすると再レンダリングされます。時には、コンポーネントの出力が全く同じであっても再レンダリングされることがあります。これを防ぐには、次を使用します：

• `React.memo()`：関数コンポーネント用の高階コンポーネント。コンポーネントのpropsの浅い比較を行います。propsが変更されていない場合、Reactはコンポーネントの再レンダリングをスキップし、最後にレンダリングされた結果を再利用します。
• `useCallback()`：コンポーネント内で定義された関数は、レンダリングのたびに再作成されます。これらの関数を`React.memo`でラップされた子コンポーネントにpropsとして渡すと、関数propが技術的には毎回新しい関数であるため、子は再レンダリングされます。`useCallback`は関数自体をメモ化し、その依存関係が変更された場合にのみ再作成されるようにします。
• `useMemo()`：`useCallback`に似ていますが、値のためのものです。高コストな計算の結果をメモ化します。計算は、その依存関係のいずれかが変更された場合にのみ再実行されます。これは、レンダリングごとに高コストな計算を防ぎ、propsとして渡される安定したオブジェクト/配列参照を維持するのに役立ちます。

3. スマートなコンポーネント構成

コンポーネントをどのように構成するかは、パフォーマンスに大きな影響を与える可能性があります。コンポーネントのstateの一部が頻繁に更新される場合は、そうでない部分からそれを分離するようにしてください。

例えば、頻繁に変更される入力フィールドがコンポーネント全体を再レンダリングさせる単一の大きなコンポーネントを持つ代わりに、そのstateを独自の小さなコンポーネントにリフトアップします。こうすることで、ユーザーが入力するたびに、その小さなコンポーネントだけが再レンダリングされます。

4. 長いリストを仮想化する

数百または数千のアイテムを持つリストをレンダリングする必要がある場合、適切なキーを使用しても、それらすべてを一度にレンダリングすると遅くなり、多くのメモリを消費する可能性があります。解決策は仮想化またはウィンドウイングです。このテクニックは、現在ビューポートに表示されているアイテムの小さなサブセットのみをレンダリングすることを含みます。ユーザーがスクロールすると、古いアイテムはアンマウントされ、新しいアイテムがマウントされます。`react-window`や`react-virtualized`のようなライブラリは、このパターンを実装するための強力で使いやすいコンポーネントを提供します。

結論

Reactのパフォーマンスは偶然ではありません。それは、仮想DOMと効率的な調整アルゴリズムを中心とした、意図的で洗練されたアーキテクチャの結果です。直接的なDOM操作を抽象化することで、Reactは手動で管理するのが非常に複雑になるであろう更新をバッチ処理し、最適化することができます。

開発者として、私たちはこのプロセスの重要な一部です。差分検出アルゴリズムのヒューリスティクスを理解し、キーを適切に使用し、コンポーネントと値をメモ化し、アプリケーションを思慮深く構成することで、Reactの調整アルゴリズムに逆らうのではなく、協力して作業することができます。Fiberアーキテクチャへの進化は、可能なことの境界をさらに押し広げ、新世代の流動的で応答性の高いUIを可能にしました。

次にstateの変更後にUIが即座に更新されるのを見たら、水面下で起こっている仮想DOM、差分検出アルゴリズム、そしてコミットフェーズのエレガントなダンスを少しだけ鑑賞してみてください。この理解こそが、より速く、より効率的で、より堅牢なReactアプリケーションを世界中の聴衆のために構築するための鍵です。